<template>
  <div id="app">
    <div
      class="VirtualList"
      :style="{ height: windowH + 'px', width: windowW + 'px' }"
    >
      <VirtualList :listData="data" :estimatedItemSize="100" v-slot="slotProps">
        <Item :item="slotProps.item" />
      </VirtualList>
    </div>
  </div>
</template>

<script>
import VirtualList from './VirtualList.vue';
import Item from './Item.vue';
// import faker from 'faker';

let data = [];
for (let id = 0; id < 1000; id++) {
  data.push({
    id
    // value: faker.lorem.sentences() // 长文本
  });
}
// https://www.cnblogs.com/caominjie/p/11802501.html
// https://blog.csdn.net/qq_37818095/article/details/102954854
let d = [];
for (let i = 0; i < 100000; i++) {
  d.push({ id: i, value: i });
}
export default {
  name: 'virtualList',
  data() {
    return {
      data: d
    };
  },
  computed: {
    windowW() {
      return document.documentElement.clientWidth;
    },
    windowH() {
      return document.documentElement.clientHeight;
    }
  },
  components: {
    VirtualList,
    Item
  }
};
</script>

<style>
.VirtualList {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 90%;
}
</style>
